<template>
  <div class="page_main">
    <canvas ref="cavs" width="700" height="700"></canvas>
  </div>

</template>

<script>
import {Dom} from "fei-common";
import KeyObj from "./keyObj.js";
console.log(Dom);
export default {
  name: "canvasTest",
  data() {
    return {
      lineArr: [],
      isHand: false,
      hand: {x: 0, y: 0},
      isInCavs: false,
      isCalcRes: false,
      rightLineArr: [6, 5, 8, 9]
    };
  },
  mounted() {
    let self = this;
    let canvas = this.$refs.cavs;
    let ctx = canvas.getContext("2d");

    this.draw(ctx);

    // 计算点击位置
    let cavsRect = canvas.getBoundingClientRect();
    canvas.addEventListener("touchstart", e => {
      this.isInCavs = true;
    });
    

    canvas.addEventListener("touchend", e => {});

    canvas.addEventListener("touchmove", e => {});
  },
  methods: {
    initKeyPool(ctx, keyPool) {
      keyPool.map(item => {
        item.isWrong = false;
        item.isActive = false;
        this.lineArr = [];
      });
      this.draw(ctx, keyPool);
    },
    draw(ctx, keyPool) {
      ctx.fillStyle = "blick";
      ctx.fillRect(0,0,200,200);
    }
  }
};
</script>

<style lang="less" scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.page_main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #345cb1;

  canvas {
    width: 7rem;
    border: 1px solid white;
    box-sizing: border-box;
  }
}
</style>
